<template>

  <div class="coupon">
    <hd titles="我的优惠券"></hd>
    <van-row>
      <van-col :class="{ down: currentIndex === 0 }" span="8" @click="show('未使用', 0)" >未使用</van-col>
      <van-col :class="{ down: currentIndex === 1 }" span="8" @click="show('已使用', 1)" >已使用</van-col>
      <van-col :class="{ down: currentIndex === 2 }" span="8" @click="show('已过期', 2)"  >已过期</van-col>
    </van-row>

    <div class="couponBtn">
      <div class="addBtn" @click="onClick">添加优惠券</div>
    </div>

    <van-dialog v-model="showDialog" :before-close="beforeClose" title="添加优惠券" show-cancel-button >
      <span>序列号:</span>
      <input type="text" placeholder="输入优惠券序列号"  class="bdNone"/>
    </van-dialog>

    <CouponItem
      v-for="(item, index) in couponItemData"
      :key="index"
      :itemData="item"
    />
  </div>
</template>


<script>
import { Dialog } from "vant";

import CouponItem from "../components/gjj/CouponItem";

import hd from '@/components/public/hd';

// 模拟数据
var coupontItemData = [
  {
    p1: "¥ 5",
    txt: "满减券",
    title: "关注5元券",
    img: "../../static/images/1.jpg",
    text: "满50元可用",
    image: "../../static/images/2.jpg",
    message: "2017-06-14 至 2017-06-21",
    state: "未使用",
  },
  {
    p1: "¥ 5",
    txt: "满减券",
    title: "优惠券名称",
    img: "../../static/images/3.jpg",
    text: "满50元可用",
    image: "../../static/images/6.jpg",
    message: "2017-06-14 至 2017-06-21",
    state: "已使用",
  },
  {
    p1: "¥ 5",
    txt: "满减券",
    title: "优惠券名称",
    img: "../../static/images/4.jpg",
    text: "满50元可用",
    image: "../../static/images/5.jpg",
    message: "2017-06-14 至 2017-06-21",
    state: "已过期",
  },
];

function myFilter(type) {
  let tmp = [];
  for (let i = 0; i < coupontItemData.length; i++) {
    if (coupontItemData[i].state === type) {
      tmp.push(groupItemData[i]);
    }
  }
  return tmp;
}

export default {
  name: "Coupon",
  data() {
    return {
      currentIndex: 0,
      showDialog: false,
      couponItemData: coupontItemData,
    };
  },
  components: {
    CouponItem,
    [Dialog.Component.name]: Dialog.Component,
    'hd':hd
  },
  methods: {
    show(type, index) {
      this.currentIndex = index;

    //   if (type === "未使用") {
    //     this.couponItemData = coupontItemData;
    //     return;
    //   }

      this.couponItemData = coupontItemData.filter(function (item) {
        return item.state == type;
      });
    },


    beforeClose(action, done) {
      console.log(action);
      if (action === "confirm") {
        setTimeout(() => {
          if (Math.random() > 0.5 ? true : false) {
            this.$toast.success("添加成功");
            done();
          } else {
            this.$toast.fail("请输入正确序列号");
          }
        }, 1000);
      } else {
        done();
      }
    },
    onClick() {
      this.showDialog = true;
    },
  },
};
</script>

<style scoped>

* {
  margin: 0;
  padding: 0;
}
.clear::before,
.clear::after {
  content: "";
  display: table;
}
.clear::after {
  clear: both;
}
body {
  background-color: white;
}
.van-col {
  margin-top: 15px;
  padding: 10px 8px;
  background-color: ghostwhite;
  border: 1px solid rgb(131, 129, 129);
}

.coupon {
  text-align: center;
  position: relative;
}
.addBtn {
  width: 350px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgb(82, 81, 81);
  position: absolute;
  top: 580px;
  left: 14px;
  right: 10px;
  border-radius: 6px;
  color: ghostwhite;
}

.van-dialog__header {
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.van-col--8{
    font-size: 12px;
}

.van-dialog__content{
    margin: 20px auto;
}

/* .van-hairline--top::after {
    border-top-color: gray;
}
.van-hairline--left::after {
    border-left-color: gray;
} */

.down.van-col--8{
    color: green;
}
.van-col{
  border: none;
}

.bdNone{
  border: none;
  font-size: 12px;
}

.van-dialog__content span{
  font-size: 14px;
}
</style>
